import React, { Component } from 'react'
import './Item.css'

export default class Item extends Component {

  state = ({mouse:false})   //鼠标标识移入移出

  //鼠标移入移出的回调
   handleMouse = (flag)=>{
      return ()=>{
        this.setState({mouse:flag})
      }
    }

    //勾选框的done改变的回调
    handleCheck = (id)=>{
      return (event)=>{
        this.props.changeCheck(id,event.target.checked)
      }
    }

    //删除按钮
    handleDelete = (id)=>{
      // window.confirm:系统自带提示，会有确定、取消选项
      if(window.confirm('您确定删除吗？')){
        this.props.deleteTodo(id)
      }
    }

  render() {
    const {id,name,done} = this.props
    const {mouse} = this.state
    return (
      <li style={{backgroundColor:mouse ? '#ddd':'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
        <label>
          <input checked={done} onChange={this.handleCheck(id)} type="checkbox"/>
          <span>{name}</span>
        </label>
        <button onClick={()=> this.handleDelete(id) } className="btn btn-danger" style={{display:mouse ? 'block':'none'}}>删除</button>
      </li>
    )
  }
}
